<template>
  <div style="width: 110px;display:inline-block;float: left;">
    <!--上传类型限制（FileButton的属性）   :accept="accept.join(',')"-->
    <div v-show="status == 0 || status == 3" class="fileButtonBox">
      <FileButton
        ref="btnRef"
        class="fileButtonStyle"
        @select="onFileSelect($event)"
        @success="fileSuccess"
        @error="fileError"
        name="file"
        :url="uploadUrl"
        :disabled="uploadDisabled"
        :autoUpload="autoUpload"
        >上传文件
      </FileButton>
    </div>
    <div v-show="status == 1" class="fileButtonBox">
      <img
        src="../assets/image/folder.png"
        alt=""
        style="width: 32px;height: 34px;display: inline-block;"
      />
      <a href="javascript:void()" @click="deleteFile" class="deleteBtn"></a>
    </div>
    <div v-if="status == 0" style="margin: 2px 0 3px 0;"></div>
    <div v-if="status == 1" class="statusDescribe" style="color:green;">
      上传完成！
    </div>
    <div v-if="status == 2" class="statusDescribe" style="color: red;">
      {{ errorMsg }}
    </div>
    <div v-if="status == 3" class="statusDescribe" style="color:green;">
      已移除！
    </div>
  </div>
</template>

<script>
import cfg from "@/config/config";

export default {
  name: "uploadFile",
  data() {
    return {
      autoUpload: false,
      uploadUrl: cfg.apiUrl + "uploadFile/upload",
      status: 0,
      uploadDisabled: false,
      responseText: null, //文件名
      errorMsg: "上传失败！",
      accept: [
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "application/vnd.ms-excel",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "application/msword",
        "image/jpeg",
        "image/png",
        "image/bmp"
      ]
    };
  },
  methods: {
    onFileSelect(f) {
      //判断大小及类型
      //let fileType = f[0].type;
      // if (this.accept.indexOf(fileType) == -1) {
      //   this.$messager.alert({
      //     title: "异常错误",
      //     icon: "error",
      //     msg:
      //       "选择的文件类型无效!,请选择以下类型文件：jpg,jpeg,png,bmp,doc,docx,xls,xlsx。"
      //   });
      //   return false;
      // }
      let fileSize = f[0].size;
      if (fileSize > 30720000) {
        this.$messager.alert({
          title: "异常错误",
          icon: "error",
          msg: "选择的文件大于30M,无法上传!"
        });
        return false;
      }
      this.$refs.btnRef.upload();
    },
    fileSuccess(xhr, file) {
      //console.log(xhr);
      let resObject = JSON.parse(xhr.xhr.response);
      if (resObject.success) {
        this.responseText = resObject.fileName;
        this.status = 1;
        this.uploadDisabled = true;
      } else {
        this.status = 2;
        this.responseText = null;
        //this.errorMsg = xhr.xhr.responseText;
      }
    },
    fileError(xhr, file) {
      this.status = 2;
      this.responseText = null;
    },
    deleteFile() {
      this.uploadDisabled = false;
      this.responseText = null;
      this.status = 3;
    },
    getUploadFileName() {
      return this.responseText;
    },
    init() {
      (this.status = 0),
        (this.uploadDisabled = false),
        (this.responseText = null);
    }
  }
};
</script>

<style scoped>
.fileButtonBox {
  height: 36px;
  margin: 10px 0 0 0;
  text-align: center;
  position: relative;
}
.fileButtonStyle {
  margin: 0;
  padding: 0 10px;
  width: auto;
  border-radius: 0;
  height: 24px;
}
.deleteBtn {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  position: absolute;
  right: 28px;
  top: -6px;
  background: url(../assets/image/deleted2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.statusDescribe {
  margin: 2px 0 3px 0;
  text-align: center;
  padding-left: 8px;
}
</style>
